<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告列表</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
    <script src="../../static/js/axios-0.18.0.js"></script>
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/plugins/echarts/echarts.js"></script>
    <!--引入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }
        .avatar {
            width: 80px;
            height: 80px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input @keyup.enter.native="findPage()" placeholder="公告标题" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
                <el-button @click="findPage()" class="dalfBut">查询</el-button>
            </div>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="newstitle" label="公告标题" align="center"></el-table-column>
                <el-table-column prop="newsdesc" label="公告简介" align="center">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="light" :content="scope.row.newsdesc" placement="top-start" style="width: 400px">
                            <span>{{scope.row.newsdesc.substring(0,16)}}...</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="发布者" align="center"></el-table-column>
                <el-table-column prop="createtime" label="发布时间" align="center"></el-table-column>
                <el-table-column label="操作"  align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-button type="success" size="mini" @click="noticedetail(scope.row)">详情</el-button>
                            <el-button type="primary" size="mini" @click="handleDisplayEdit(scope.row)">编辑</el-button>
                            <el-button type="danger"  size="mini" @click="handleDel(scope.row)">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
            <!-- 编辑标签弹层 -->
            <div class="add-form">
                <el-dialog title="编辑公告" :visible.sync="dialogFormVisible4Edit">
                    <el-form ref="dataEditForm" :model="editData" :rules="rules" label-position="right" label-width="100px">
                        <el-row>
                            <el-form-item label="公告标题" prop="newstitle">
                                <el-input v-model="editData.newstitle"/>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="公告简介" prop="newsdesc">
                                <el-input
                                        type="textarea"
                                        placeholder="请输入内容"
                                        :autosize="{minRows:3,maxRows:5}"
                                        v-model="editData.newsdesc"
                                        maxlength="50"
                                        show-word-limit
                                >
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="公告内容" prop="newscontent">
                                <el-input
                                        type="textarea"
                                        placeholder="请输入内容"
                                        :autosize="{minRows:3,maxRows:7}"
                                        v-model="editData.newscontent"
                                        maxlength="300"
                                        show-word-limit
                                >
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="公告图">
                                <el-upload
                                        class="avatar-uploader"
                                        action="/news/upload"
                                        :auto-upload=true
                                        name="imgFile"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过2048kb</div>
                                </el-upload>
                            </el-form-item>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
    <!-- 公告详情弹层 -->
    <div class="news">
        <el-dialog title="公告详情" :visible.sync="dialogFormVisible4Desc">
            <div style="text-align: center;font-size: 25px;color: #2b542c">{{newdesc.newstitle}}</div>
            <div style="text-align: center;font-size: 10px;color: #5e5e5e;margin-top: 10px;">
                By:{{newdesc.username}}-Time:{{newdesc.createtime}}
            </div>
            <div style="text-align: left;width: 80%;height: auto; font-size: 20px;color: #000000;margin-top: 10px;margin-left: 90px">
                {{newdesc.newscontent}}
            </div>
        </el-dialog>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
                queryString:null//查询条件
            },
            imageUrl:null,
            dialogFormVisible4Edit:false,
            dataList:[],//表格数据
            editData:[],//编辑表单数据
            dialogFormVisible4Desc: false,
            newdesc: {},
            rules: {
                newstitle:[{required:true,message:'标题为必填项',trigger:'blur'},
                    {min:3,max:10,message:'标题长度在3-10个字符',trigger:'blur'}],
                newsdesc:[{required:true,message:'公告简介为必填项',trigger:'blur'}],
                newscontent:[{required:true,message:'公告内容',trigger:'blur'},
                    {min:20,max:300,message:'内容长度在20-300个字符',trigger:'blur'}],
                image:[{required:true,message:'必须上传图片'}]
            },
        },
        //钩子函数，查找公告数据
        created(){
            this.findPage();
        },
        methods:{
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response, file) {
                this.imageUrl = response.data;
                this.$message({
                    type:response.flag ? 'success' : 'error',
                    message:response.message
                })
                //设置form表单中的img数据，为后来提交到数据库做准备
                this.editData.image=response.data;
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //分页查询
            findPage(){
                var page ={
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                };
                axios.post("/news/findall",page).then((res)=>{
                    this.dataList = res.data.rows;
                    this.pagination.total = res.data.total;
                }).catch(()=>{
                    this.$message.error("网络不好");
                })
            },
            //公告详情
            noticedetail(noticedata) {
                this.dialogFormVisible4Desc = true;
                this.newdesc = JSON.parse(JSON.stringify(noticedata));
            },
            //弹出编辑框
            handleDisplayEdit(row){
                //显示编辑框
                this.dialogFormVisible4Edit=true;
                //回显数据
                this.oneData = row;
                this.editData = JSON.parse(JSON.stringify(this.oneData));
                this.imageUrl = row.image;
            },
            //删除
            handleDel(row){
                this.$confirm("确定删除吗?","删除",{type:'waning'}).then(()=>{
                    axios.get("/news/delete/"+row.id).then((res)=>{
                        this.$message.success(res.data.message);
                        this.findPage();
                    }).catch(()=>{
                        this.$message.error(res.data.message);
                    })
                }).catch(()=>{
                    this.$message.warning("已取消");
                })
            },
            //提交编辑
            handleEdit(){
                this.$refs['dataEditForm'].validate((valid)=>{
                    if(valid){
                        axios.post("/news/update",this.editData).then((res)=>{
                            if(res.data.flag){
                                //成功
                                this.dialogFormVisible4Edit = false;
                                this.$message.success(res.data.message);
                                this.findPage();
                            }else{
                                this.$message.error(res.data.message);
                            }
                        }).catch(()=>{
                            this.$message.error("网络出错");
                        })
                    }else{
                        this.$message.error("请检查表单");
                    }
                })
            },
            //页码改变
            handleCurrentChange(){
                this.findPage();
            }
        }
    })
</script>
</html>